<!--
 * @Description: 文件描述
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-09 14:42:20
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-10-08 10:39:27
 * @心得体会: 无
-->
<template>
    <div class="w-full">
        <el-form :inline="true" :model="formInline" class="w-full h-10">
            <el-form-item label="医生姓名">
                <el-input v-model="formInline.doctorName" placeholder="医生姓名" clearable class="w-40"/>
            </el-form-item>
            <el-form-item label="医生电话">
                <el-input v-model="formInline.phonenumber" placeholder="医生电话" clearable class="w-40"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-button type="primary" @click="toAdd">添加医生</el-button>
    <el-button type="danger" @click="delDoctor">删除</el-button>
    <el-button type="" @click="toexportExcel">导出</el-button>
    <br>
    <!-- 表格显示 -->
    <el-table :data="tableData" style="width: 100%" border height="60vh" highlight-current-row @row-dblclick="getInfo"  @selection-change="selected">
        <el-table-column fixed type="selection" width="50" />
        <el-table-column prop="doctorId" label="序号" width="80" align="center"></el-table-column>
        <el-table-column label="图片"  align="center" width="80">
            <template v-slot="scope">
                <el-image class="h-10" :src="scope.row.doctorImg">
                </el-image>
            </template>
        </el-table-column>
        <el-table-column prop="doctorname" label="医生姓名"  align="center"></el-table-column>
        <el-table-column prop="sex" label="性别"  align="center">
            <template v-slot="scope">
                <!-- 标签 -->
                <el-tag v-if="scope.row.sex == 1" type="success">男</el-tag>
                <el-tag v-else type="primary">女</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="profile" label="简介"  align="center"></el-table-column>
        <el-table-column prop="phonenumber" label="电话"  align="center"></el-table-column>
        <el-table-column prop="email" label="邮箱"  align="center"></el-table-column>
        <el-table-column prop="registerfee" label="预约费用"  align="center"></el-table-column>
        <el-table-column label="操作"  align="center">
            <template #default="scope">
                <el-button type="primary" @click="toEdit(scope.row)">修改信息</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 页码 -->
    <div class="flex justify-center items-end w-full h-16 mt-2">
        <el-pagination
            v-model:current-page="pageForm.currentPage"
            v-model:page-size="pageForm.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
            <el-switch v-model="background" class="ml-2" />
    </div>
    <!-- 弹出对话框 -->
    <el-dialog v-model="dialogVisible" :title="EditOrAddTitle" width="400" :before-close="handleClose">
        <el-form :model="EditOrAdd" label-width="auto" class="w-full">
            <el-form-item label="医生姓名">
                <el-input v-model="EditOrAdd.doctorname" placeholder="医生姓名" clearable class="w-40"/>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="EditOrAdd.sex" placeholder="性别">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="科室">
                <el-select v-model="EditOrAdd.departmentId" placeholder="科室">
                    <el-option v-for="item in departmentList" :key="item.departmentId" :label="item.departmentName" :value="item.departmentId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="简介">
                <el-input v-model="EditOrAdd.profile" placeholder="简介" clearable class="w-40"/>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="EditOrAdd.phonenumber" placeholder="电话" clearable class="w-40"/>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="EditOrAdd.email" placeholder="邮箱" clearable class="w-40"/>
            </el-form-item>
            <el-form-item label="预约费用">
                <el-input v-model="EditOrAdd.registerfee" placeholder="预约费用" clearable class="w-40"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="registerCome">
                    确定
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 双击查看详情 -->
    <el-dialog v-model="dialogInfoVisible" title="医生详情" width="400" class="pl-8">
        <el-form :model="doctorInfo" label-width="auto" class="w-full">
            <el-form-item label="序号">
                <el-text class="w-40">{{ doctorInfo.doctorId }}</el-text>
            </el-form-item>
            <el-form-item label="医生姓名">
                <el-text class="w-40">{{ doctorInfo.doctorname }}</el-text>
            </el-form-item>
            <el-form-item label="性别">
                <el-text class="w-40" v-if="doctorInfo.sex == 1">男</el-text>
                <el-text class="w-40" v-else>女</el-text>
            </el-form-item>
            <el-form-item label="科室">
                <el-text class="w-40">{{ doctorInfo.departmentName }}</el-text>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-text class="w-40">{{ doctorInfo.email }}</el-text>
            </el-form-item>
            <el-form-item label="电话">
                <el-text class="w-40">{{ doctorInfo.phonenumber }}</el-text>
            </el-form-item>
            <el-form-item label="简介">
                <el-text class="w-40">{{ doctorInfo.profile }}</el-text>
            </el-form-item>
            <el-form-item label="预约费用">
                <el-text class="w-40 text-green-400">{{ doctorInfo.registerfee }}</el-text>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-text class="w-40">{{ doctorInfo.createTime }}</el-text>
            </el-form-item>
            <el-form-item label="创建人">
                <el-text class="w-40">{{ doctorInfo.creater }}</el-text>
            </el-form-item>
            
        </el-form>
    </el-dialog>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getList,edit,add, del, getDepartmentX, exportExcel } from "@/api/user/DoctorInfo.js"
// 表格数据
const tableData = ref([
    {id: 1, doctorImg: "@/assets/img/xx.png", doctorName: "张三", sex: "男", description: "我是一个好医生", phonenumber: "123456789", price: "100", status: 1},
    {id: 2, doctorImg: "@/assets/img/xx.png", doctorName: "张三", sex: "男", description: "我是一个好医生", phonenumber: "123456789", price: "100", status: 1},
    {id: 3, doctorImg: "@/assets/img/xx.png", doctorName: "张三", sex: "男", description: "我是一个好医生", phonenumber: "123456789", price: "100", status: 1}
])
// 对话框可见
let dialogVisible = ref(false)
let dialogInfoVisible = ref(false)
// 背景
const background = ref(false)
// 最后一页面
const pageForm = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 50
})
const formInline = reactive({
  doctorName: "",
  phonenumber : ""
})
// 搜素数据
const pageSearch = computed(() => {
  return {
    page: pageForm.currentPage,
    limit: pageForm.pageSize,
    doctorname: formInline.doctorName,
    phonenumber: formInline.phonenumber
  }
})
// 预约表单
let EditOrAdd = reactive({
  doctorId: "",
  doctorname: "",
  sex:"",
  departmentId: "",
  departmentName: "",
  email: "",
  profile: "",
  phonenumber: "",
  registerfee: ""
})
let EditOrAddTitle = ref("添加医生")
// 医生详情页
let doctorInfo = reactive({})

const departmentList = ref([])

// 选择复选框
let idArr = []
const selected = (data) => {
  idArr = []
  data.forEach((value) => {
    idArr.push(value.doctorId)
  })
  console.log(idArr)
}


// 初始化数据
initData()
// 初始化方法
function initData(){
    console.log(pageSearch.value.limit)
     getList(pageSearch.value).then(res =>{
        console.log(res)
        // 初始化表格数据
        tableData.value = res.data.pageList.list
        pageForm.total = res.data.pageList.totalCount
        pageForm.currentPage = res.data.pageList.currPage
        pageForm.pageSize = res.data.pageList.pageSize
    })
    getDepartmentX().then(res =>{
        console.log(res)
        departmentList.value = res.data
    })
}

function toexportExcel(){
    exportExcel(pageSearch.value).then(res =>{
        console.log(res)
    })
}
// 搜搜
const onSearch = () => {
  initData()
}
// 双击查看
const getInfo = (row) => {
//   console.log(row)
  doctorInfo = row
  dialogInfoVisible.value = true
  console.log(doctorInfo)
}
// 进行编辑
const toEdit = (row) => {
  // 设置可见
  dialogVisible.value = true
  EditOrAddTitle = "编辑医生"
  EditOrAdd = reactive(row)
  console.log(EditOrAdd)
}
// 进行添加
const toAdd = () => {
  // 设置可见
  dialogVisible.value = true
  EditOrAddTitle = "添加医生"
  
  EditOrAdd = reactive({
    doctorId: "",
    doctorname: "",
    sex:"",
    departmentId: "",
    departmentName: "",
    email: "",
    profile: "",
    phonenumber: "",
    registerfee: ""
  })
}
const handleClose = () => {
  ElMessageBox.confirm('你确定取消当前变更吗？',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
        dialogVisible.value = false
        ElMessage({
            type: 'success',
            message: "已取消",
        })
    })
    .catch(() => {
      
    })
}
// 确定预约
const registerCome = () => {
  if(EditOrAdd.doctorId == ""){
    add(EditOrAdd).then(res =>{
        if(res.code == 200){
            ElMessage({
                type: 'success',
                message: "添加成功",
            })
            initData()
        }
    })
  }else{
    edit(EditOrAdd).then(res =>{
        if(res.code == 200){
            ElMessage({
                type: 'success',
                message: "编辑成功",
            })
            initData()
        }
    })
  }
  dialogVisible.value = false
}
const delDoctor = ()=>{
    ElMessageBox.confirm('你确定删除当前医生吗？',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
        console.log(idArr)
        del(idArr).then(res =>{
            if(res.code == 200){
                ElMessage({
                    type: 'success',
                    message: "已删除",
                })
                initData()
            }else{
                ElMessage({
                    type: 'error',
                    message: res.msg,
                })
            }
        })
    })
    .catch(() => {
     
    })
}
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  initData()
}
const handleCurrentChange = (val) => {
  // console.log(`current page: ${val}`)
  initData()
}
</script>

<style scoped>

</style>